<template>
  <div class="total">
    <h1>商标使用许可备案</h1>
    <el-form :label-position="right" label-width="250px" size="mini">
      <el-form-item label="许可人名称(中文) :">
        <span>{{ formData.appName }}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{ formData.appNameEn }}</span>
      </el-form-item>
      <el-form-item label="许可人地址(中文) :">
        <span>{{ formData.busAddress }}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{ formData.appAddEn }}</span>
      </el-form-item>
      <el-form-item label="被许可人名称(中文) :">
        <span>{{ formData.licenseesCh }}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{ formData.licenseesEn }}</span>
      </el-form-item>
      <el-form-item label="被许可人地址(中文) :">
        <span>{{ formData.licenseesAddrCh }}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{ formData.licenseesAddrEn }}</span>
      </el-form-item>
      <el-form-item label="被许可人营业执照 :" class="busimg-img">
        <imgshow>
          <img :src="this.mconfig.host+formData.licenseesBusimg" class="busimgbb" alt />
        </imgshow>
      </el-form-item>

      <el-form-item
        label="被许可人身份证正反面 :"
        class="idcard-img idcard-imgs"
        v-if="formData.selectType==1?true:false"
      >
        <imgshow>
          <img :src="this.mconfig.host+formData.iddbimage" class="idcardbb" alt />
        </imgshow>
      </el-form-item>
      <el-form-item label="邮政编号 :">
        <span>{{ formData.postCode }}</span>
      </el-form-item>
      <el-form-item label="联系人 :">
        <span>{{ formData.contacts }}</span>
      </el-form-item>

       <el-form-item label="邮箱 :">
        <span>{{ formData.email }}</span>
      </el-form-item>

      <el-form-item label="电话 :">
        <span>{{ formData.phone }}</span>
      </el-form-item>
      <el-form-item label="代理机构名称 :">
        <span>{{ formData.deptName }}</span>
      </el-form-item>
      <el-form-item label="商标注册号 :">
        <span>{{ formData.appCode }}</span>
      </el-form-item>
      <div class="choice">
        <el-form-item label="是否共有商标 :">
          <!-- <el-checkbox-group v-model="formData.commStatus">
              <el-checkbox label="1" disabled>是</el-checkbox>
              <el-checkbox label="0" disabled>否</el-checkbox>
          </el-checkbox-group>-->
          <div>
            <span v-if="formData.commStatus == '1'" style="margin-left:0px">是</span>
            <span v-else style="margin-left:0px">否</span>
          </div>
        </el-form-item>
      </div>
      <el-form-item label="再许可 :">
        <!-- <el-checkbox-group v-model="formData.sublicenseStatus">
            <el-checkbox label="1" disabled>是</el-checkbox>
            <el-checkbox label="0" disabled>否</el-checkbox>
        </el-checkbox-group>-->
        <div>
          <span v-if="formData.sublicenseStatus == '1'">是</span>
          <span v-else>否</span>
        </div>
      </el-form-item>
      <el-form-item label="许可人原备案号 :">
        <span>{{ formData.registNumOri }}</span>
      </el-form-item>
      <el-form-item label="许可期限 :">
        <span>{{ formData.periodLicense }}</span>
      </el-form-item>
      <el-form-item label="许可使用的商品/服务项目(分类填写) :">
        <span>{{ formData.goodsPermit }}</span>
      </el-form-item>
      <el-form-item label="许可人营业执照 :" class="busimg-img">
        <imgshow>
          <img :src="this.mconfig.host+formData.busimg" class="busimgbb" alt />
        </imgshow>
      </el-form-item>
      <el-form-item label="许可人身份证正反面 :" class="idcard-img idcard-imgs" v-if="formData.idcardimg">
        <imgshow>
          <img :src="this.mconfig.host+formData.idcardimg" class="idcardbb" alt />
        </imgshow>
      </el-form-item>
       <el-form-item label="网上确认书 :" class="busimg-img">
        <imgshow>
          <img :src="this.mconfig.host+formData.qrfile" class="busimgbb" alt />
        </imgshow>
      </el-form-item>
      <el-form-item label="其他附件:" class="busimg-img" v-if="formData.otherfile.length > 0">
        <imgshow v-for="item, index in formData.otherfile" :key="index">
          <img :src="mconfig.host+item" class="busimgbb" alt />
        </imgshow>
      </el-form-item>
    </el-form>

    <!-- 签字/章戳 -->
    <!-- <div class="signs">
      <div class="sign">
        <div>
          <span>许可人章戳(签字) :</span>
        </div>
        <div>
          <span>被许可人章戳(签字) :</span>
        </div>
        <div>
          <span>代理机构章戳 :</span>
        </div>
      </div>
      <div class="agent">
        <p>代理人签字 :</p>
      </div>
      <p class="careful">注：请 按 说 明 填 写</p>
    </div>-->

    <!-- 第二部分 -->
    <section v-if="appLenFn()">
      <div class="model-title">
        <h4>商标使用许可备案</h4>
        <p>（附页）</p>
        <p style="font-size:16px;margin-top:40px">其他共有许可人</p>
      </div>
      <div>
        <el-form ref="otherJson" class="model-form" label-width="250px" size="small">
          <div v-for="(item,index) in append" :key="index">
            <div>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="index+1 +'.名称(中文) :'">
                    <span>{{item.partNameCh}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="(英文) :">
                    <span>{{item.partNameEn}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="地址(中文) :">
                    <span>{{item.partAddrCh}}</span>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="10" style="text-align:right">
                                <span class="signature">（章戳/签字）</span>
                </el-col>-->
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="(英文) :">
                    <span>{{item.partAddrEn}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="营业执照 :">
                  <imgshow>
                    <img :src="mconfig.host+item.busimg" class="idcardbb" alt />
                  </imgshow>
                </el-form-item>
                <el-form-item
                  label="许可人身份证 :"
                  class="idcard-img idcard-imgs"
                  v-if="item.idcardimg"
                >
                  <imgshow>
                    <img :src="mconfig.host+item.idcardimg" class="idcardbb" alt />
                  </imgshow>
                </el-form-item>
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
    </section>

    <!-- 第三部分 -->
    <!-- <section>
      <div class="model-title">
        <h4>商标使用许可备案</h4>
        <p>（附页）</p>
      </div>
      <div>
        <el-form ref="otherJson" class="model-form" label-width="250px" size="small">
          <div v-for="(item,index) in append" :key="index">
            <el-form-item label="许可使用的商品/服务项目(续) :">
              <span></span>
            </el-form-item>
          </div>
          </el-form>
      </div>
    </section>-->
  </div>
</template>

<script>
import imgshow from "../common/imgshow";
export default {
  components: {
    imgshow,
  },
  data() {
    return {
      right: "right",
      // 商标使用许可备案
      // 右对齐
      labelPosition: "right",
      // 字段名
      formData: {
        DocumentNo: "", // 单据号
        app_code: "", // 商标注册号
        branchNetworkId: "", // 网点编号
        registNumOri: "", // 许可人原备案号
        code_postal: "", // 邮政编码
        commStatus: ["1"], // 是否共有商标
        contacts: "", // 联系人
        goods_permit: "", // 许可商品/服务项目
        id: "", // 主键
        licensees_addr_ch: "", // 被许可人地址(中文)
        licensees_addr_en: "", // 被许可人地址(英文)
        licensees_ch: "", // 被许可人名称(中文)
        licensees_en: "", // 被许可人名称(英文)
        licensors_addr_ch: "", // 许可人地址(中文)
        licensors_addr_en: "", // 许可人地址(英文)
        licensors_ch: "", // 许可人名称(中文)
        licensors_en: "", // 许可人名称(英文)
        name_agen: "", // 代理机构名称
        period_license: "", // 许可期限
        phone: "", // 电话
        proAppendJson: "", // 共享人json
        sublicenseStatus: ["1"], // 再许可
        userId: "", // 用户id
        // busimg:'', // 营业执照
        // idcardimg:'',// 身份证
        showvist: false,
        // 新增图片字段
        otherfile:[],
      },
      append: [], // 共享人
    };
  },
  methods: {
    appLenFn() {
      var appLen = 0;
      this.append.forEach((item) => {
        for (const key in item) {
          if (item[key] !== "") {
            appLen += 1;
          }
        }
      });
      if (appLen == 0) {
        return false;
      } else {
        return true;
      }
    },

    funb() {
      this.$http
        .get("/trademark/proTRecord/findByIdDetl", {
          params: { id: this.$route.query.id },
        })
        .then((res) => {
          let _this = this;
          this.formData = res.data.data.data;
          this.append = res.data.data.append;
          this.formData.busimg = res.data.data.data.busimg.split(",")[0];
          this.formData.idcardimg = res.data.data.data.idcardimg.split(",")[0];
          this.formData.otherfile = JSON.parse(this.formData.otherfile);
          this.formData.sublicenseStatus = [this.formData.sublicenseStatus];
          this.formData.commStatus = [this.formData.commStatus];
          console.log(_this.formData.periodLicense.split(",")[0]);
          var ks = "";
          var js = "";
          ks =
            new Date(_this.formData.periodLicense.split(",")[0]).getFullYear() +
            "-" +
            (new Date(_this.formData.periodLicense.split(",")[0]).getMonth() +
              1) +
            "-" +
            new Date(_this.formData.periodLicense.split(",")[0]).getDate();

          js =
            new Date(_this.formData.periodLicense.split(",")[1]).getFullYear() +
            "-" +
            (new Date(_this.formData.periodLicense.split(",")[1]).getMonth() +
              1) +
            "-" +
            new Date(_this.formData.periodLicense.split(",")[1]).getDate();
          this.formData.periodLicense = ks + "至" + js;
        });
    },
  },
  mounted() {
    this.funb();

  },
};
</script>

<style scoped>
.total {
  width: 1200px;

}

.total h1 {
  padding: 30px 0;
  text-align: center;
  font-weight: 500;
  font-size: 30px;
}

.el-form {
  margin-left: 248px;
}

.total div {
  margin-bottom: 0;
}

.positions {
  margin: 30px 0;
}

.choice span {
  margin-left: 50px;
}

/* 签字 */
.sign {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.sign div {
  width: 200px;
  margin: 15px;
}

.sign div span {
  color: #000;
}

/* 代理人 */
.signs .agent {
  margin-top: 100px;
  margin-right: 350px;
  text-align: right;
}

.signs .careful {
  margin-top: 40px;
  margin-left: 310px;
  color: #999;
}

/* 附加页 */
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.additional {
  margin-top: 150px;
  height: 300px;
}

.additional h2 {
  text-align: center;
  font-weight: 500;
}

.additional .other {
  margin-top: 40px;
}

.additional .other .main {
  text-align: center;
  margin-top: 20px;
}

.additional ul {
  margin-top: 50px;
  margin-left: 300px;
}

.additional ul li {
  margin: 10px 0;
}

.additional ul li span {
  display: inline-block;
  width: 106px;
  text-align: right;
  color: #000;
}

.additional ul li p {
  display: inline-block;
  margin-left: 300px;
  color: #ccc;
  margin-top: -8px;
}

.model-title {
  padding: 0 100px;
  text-align: center;
  font-size: 28px;
  color: #666;
  font-weight: 400;
  margin-bottom: 40px;
}

.model-title h4,
.model-title p {
  margin: 10px 0;
}

.model-title p {
  font-size: 18px;
}

.model-title > h4 {
  font-size: 22px;
  font-weight: normal;
  margin-top: 30px;
}

.seal {
  padding: 0 20px;
}

.seal-container {
  min-height: 150px;
}

.model-form {
  margin-bottom: 50px;
}

/* 签字 */
.signature {
  color: #ccc;
}

/* 营业执照 */
.busimgbb {
  /* width: 500px; */
  margin: 5px;
}

/* 身份证 */
.idcardbb {
  /* width: 350px; */
  display: inline-block;
  margin: 5px;

  padding-bottom: 10px;
}
.idcard-imgs {
  margin-bottom: 20px;
}
img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
</style>
